const path = require('path')
const resolve = (dir) => path.join(process.cwd(), dir)
const nodeExternals = require('webpack-node-externals')
const devPort = '80'

const mockServer = () => {
  if (process.env.NODE_ENV === 'development') return require('./examples/mock')
  else return ''
}

module.exports = {
  publicPath: '/',
  outputDir: 'lib',
  lintOnSave: false,
  productionSourceMap: false,
  runtimeCompiler: true,
  devServer: {
    hot: true,
    port: devPort,
    open: true,
    noInfo: false,
    overlay: {
      warnings: true,
      errors: true,
    },
    after: mockServer(),
  },
  chainWebpack: (config) => {
    config.devServer.disableHostCheck(true)
    config.resolve.alias.set('hotent-ui', resolve('./'))

    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.set('externals', [
        {
          axios: 'axios',
          vuedraggable: 'vuedraggable',
          'element-ui': 'element-ui',
          jquery: 'jquery',
          lodash: 'lodash',
          html2canvas: 'html2canvas',
          jszip: 'jszip',
        },
        /panzoom/i,
        /js-base64/i,
        nodeExternals(),
      ])

      config.module
        .rule('images')
        .test(/\.(gif|png|jpe?g)(\?\S*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 1024 * 30,
          name: path.posix.join('static', '[name].[hash:7].[ext]'),
        })
    })

    // 删除预加载
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  },
  css: {
    sourceMap: false,
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        additionalData: `@import "~@/styles/variables.scss";`,
      },
    },
  },
}
